<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>广告后台系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/favicon.ico">
	<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/css/index.css" media="all" />
</head>
<body class="main_body">
	<div class="layui-layout layui-layout-admin">
		<!-- 顶部 -->
		<div class="layui-header header">
			<div class="layui-main mag0">
				<a href="javascript:location.reload();"  class="logo" title="点击刷新" >广告后台系统</a>
				<!-- 显示/隐藏菜单 -->
				<a href="javascript:location.reload();" class="seraph hideMenu icon-caidan"></a>
			    <!-- 顶部右侧菜单 -->
			    <ul class="layui-nav top_menu">
					<li class="layui-nav-item lockcms" pc>
						<a href="javascript:;"><i class="seraph icon-lock"></i><cite>锁屏</cite></a>
					</li>
					<li class="layui-nav-item" id="userInfo">
						<a href="javascript:;"><img th:src="${session.user?.icon}" class="layui-nav-img userAvatar" width="35" height="35"><cite class="adminName" th:text="${session.user.name}"></cite></a>
						<dl class="layui-nav-child">
							<dd pc><a href="javascript:;" class="changeSkin"><i class="layui-icon">&#xe61b;</i><cite>更换皮肤</cite></a></dd>
							<dd><a href="/logout" class="signOut"><i class="seraph icon-tuichu"></i><cite>退出</cite></a></dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
		<!-- 左侧导航 -->
		<div class="layui-side layui-bg-black">
			<div class="user-photo">
				<a class="img" title="我的头像" ><img th:src="${session.user?.icon}" class="userAvatar"></a>
				<p>你好！<span class="userName"  th:text="${session.user.name}"></span>, 欢迎登录</p>
			</div>
			<div class="navBar layui-side-scroll" id="navBar">
				<ul class="layui-nav layui-nav-tree">
					<li class="layui-nav-item layui-this">
						<a href="javascript:;" data-url="/deskManager"><i class="layui-icon" data-icon=""></i><cite>后台首页</cite></a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 右侧内容 -->
		<div class="layui-body layui-form">
			<div class="layui-tab mag0" lay-filter="bodyTab" id="top_tabs_box">
				<ul class="layui-tab-title top_tab" id="top_tabs">
					<li class="layui-this" lay-id=""><i class="layui-icon">&#xe68e;</i> <cite>后台首页</cite></li>
				</ul>
				<ul class="layui-nav closeBox">
				  <li class="layui-nav-item">
				    <a href="javascript:;"><i class="layui-icon caozuo">&#xe643;</i> 页面操作</a>
				    <dl class="layui-nav-child">
					  <dd><a href="javascript:;" class="refresh refreshThis"><i class="layui-icon">&#x1002;</i> 刷新当前</a></dd>
				      <dd><a href="javascript:;" class="closePageOther"><i class="seraph icon-prohibit"></i> 关闭其他</a></dd>
				      <dd><a href="javascript:;" class="closePageAll"><i class="seraph icon-guanbi"></i> 关闭全部</a></dd>
				    </dl>
				  </li>
				</ul>
				<div class="layui-tab-content clildFrame">
					<div class="layui-tab-item layui-show">
						<iframe src="/deskManager"></iframe>
					</div>
				</div>
			</div>
		</div>


	<!-- 移动导航 -->
	<div class="site-tree-mobile"><i class="layui-icon">&#xe602;</i></div>
	<div class="site-mobile-shade"></div>

	<script type="text/javascript" src="/layui/layui.js"></script>
	<script type="text/javascript" src="/js/cache.js"></script>
	<script type="text/javascript">
		var $,tab,dataStr,layer;
		layui.config({
			base : "/js/"
		}).extend({
			"bodyTab" : "bodyTab"
		})
		layui.use(['bodyTab','form','element','layer','jquery'],function(){
			var form = layui.form,
					element = layui.element;
			$ = layui.$;
			layer = parent.layer === undefined ? layui.layer : top.layer;
			tab = layui.bodyTab({
				openTabNum : "50",
				url : "/permission/loadIndexLeftMenuJson"
			});

			function getData(json){
				console.log("[getData] 请求左侧菜单数据，参数：", json);
				$.getJSON(tab.tabConfig.url,function(data){
					dataStr = data.data;
					console.log("[getData] 左侧菜单数据返回，长度：", dataStr.length);
					//重新渲染左侧菜单
					tab.render();
				})
			}

			$(".topLevelMenus li,.mobileTopLevelMenus dd").click(function(){
				if($(this).parents(".mobileTopLevelMenus").length != "0"){
					$(".topLevelMenus li").eq($(this).index()).addClass("layui-this").siblings().removeClass("layui-this");
				}else{
					$(".mobileTopLevelMenus dd").eq($(this).index()).addClass("layui-this").siblings().removeClass("layui-this");
				}
				$(".layui-layout-admin").removeClass("showMenu");
				$("body").addClass("site-mobile");
				let menuParam = $(this).data("menu");
				console.log("[菜单点击] menu 参数：", menuParam);
				getData(menuParam);
				//渲染顶部窗口
				tab.tabMove();
			})

			//隐藏左侧导航
			$(".hideMenu").click(function(){
				if($(".topLevelMenus li.layui-this a").data("url")){
					layer.msg("此栏目状态下左侧菜单不可展开");  //主要为了避免左侧显示的内容与顶部菜单不匹配
					return false;
				}
				$(".layui-layout-admin").toggleClass("showMenu");
				//渲染顶部窗口
				tab.tabMove();
			})

			getData("contentManagement");

			// 添加新窗口
			$("body").on("click",".layui-nav .layui-nav-item a:not('.mobileTopLevelMenus .layui-nav-item a')",function(){
				//如果不存在子级
				if($(this).siblings().length == 0){
					console.log("[菜单点击] 打开新 tab，链接 data-url=", $(this).attr("data-url"));
					addTab($(this));
					//移动端点击菜单关闭菜单层
					let lastUrl = $(this).attr("data-url");
					if (lastUrl) {
						console.log("[保存] 设置 lastVisitedPage:", lastUrl);
						localStorage.setItem("lastVisitedPage", lastUrl);
					}
					$('body').removeClass('site-mobile');
				}
				$(this).parent("li").siblings().removeClass("layui-nav-itemed");
			})

			if(cacheStr == "true") {
				if (window.sessionStorage.getItem("menu") != null) {
					menu = JSON.parse(window.sessionStorage.getItem("menu"));
					curmenu = window.sessionStorage.getItem("curmenu");
					console.log("[缓存恢复] 读取 menu 和 curmenu:", menu, curmenu);
					var openTitle = '';
					for (var i = 0; i < menu.length; i++) {
						openTitle = '';
						if (menu[i].icon) {
							if (menu[i].icon.split("-")[0] == 'icon') {
								openTitle += '<i class="seraph ' + menu[i].icon + '"></i>';
							} else {
								openTitle += '<i class="layui-icon">' + menu[i].icon + '</i>';
							}
						}
						openTitle += '<cite>' + menu[i].title + '</cite>';
						openTitle += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' + menu[i].layId + '">&#x1006;</i>';
						element.tabAdd("bodyTab", {
							title: openTitle,
							content: "<iframe src='" + menu[i].href + "' data-id='" + menu[i].layId + "'></iframe>",
							id: menu[i].layId
						})
						//定位到刷新前的窗口
						if (curmenu != "undefined") {
							if (curmenu == '' || curmenu == "null") {  //定位到后台首页
								element.tabChange("bodyTab", '');
							} else if (JSON.parse(curmenu).title == menu[i].title) {  //定位到刷新前的页面
								element.tabChange("bodyTab", menu[i].layId);
							}
						} else {
							element.tabChange("bodyTab", menu[menu.length - 1].layId);
						}
					}
					//渲染顶部窗口
					tab.tabMove();
				}
			}else{
				window.sessionStorage.removeItem("menu");
				window.sessionStorage.removeItem("curmenu");
				console.log("[缓存清理] cacheStr != true，清除 sessionStorage 菜单数据");
			}

			// 页面加载后自动打开上次访问页面（若不是首页）
			let lastVisited = localStorage.getItem("lastVisitedPage");
			console.log("[自动打开] 读取 localStorage lastVisitedPage:", lastVisited);
			if (lastVisited && lastVisited !== "/deskManager") {
				setTimeout(function() {
					console.log("[自动打开] 正在打开最近访问页面:", lastVisited);
					// 这里模拟一个对象给 addTab 使用
					var $a = $('<a></a>');
					$a.attr('data-url', lastVisited);
					$a.text('最近访问');
					addTab($a);

					// 同步左侧导航高亮
					// 找到对应左侧菜单项 <a>，基于 data-url 属性匹配
					var $leftMenuLink = $('.navBar .layui-nav-item a[data-url="' + lastVisited + '"]');
					if ($leftMenuLink.length > 0) {
						// 先清除其他高亮
						$('.navBar .layui-nav-item').removeClass('layui-this layui-nav-itemed');
						$('.navBar .layui-nav-item a').removeClass('layui-this');

						// 给匹配的菜单项加高亮
						$leftMenuLink.addClass('layui-this');
						$leftMenuLink.parent().addClass('layui-this');

						// 如果菜单有折叠，展开对应的父级菜单
						$leftMenuLink.parents('.layui-nav-item').addClass('layui-nav-itemed');
					}
				}, 500); // 延迟打开，防止 tab 还没初始化完毕
			} else {
				console.log("[自动打开] 无需自动打开，默认首页或无记录");
			}

		})

		//打开新窗口
		function addTab(_this){
			console.log("[addTab] 添加tab，data-url=", _this.attr("data-url"));
			tab.tabAdd(_this);
		}


		//打开新窗口
		function addTab(_this){
			tab.tabAdd(_this);
		}

		//捐赠弹窗
		function donation(){
			layer.tab({
				area : ['260px', '367px'],
				tab : [{
					title : "微信",
					content : "<div style='padding:30px;overflow:hidden;background:#d2d0d0;'><img src='images/wechat.jpg'></div>"
				},{
					title : "支付宝",
					content : "<div style='padding:30px;overflow:hidden;background:#d2d0d0;'><img src='images/alipay.jpg'></div>"
				}]
			})
		}

		//图片管理弹窗
		function showImg(){
			$.getJSON('json/images.json', function(json){
				var res = json;
				layer.photos({
					photos: res,
					anim: 5
				});
			});
		}
	</script>
	</div>
</body>
</html>
